import { useMemo } from 'react';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import './index.less';

export default ({ loading }) => {

  const left = useMemo(() => {
    if (loading) {
      return localStorage.getItem('menuExpand') == 'open' ? '232px' : '0';
    }
  }, [loading])

  const antIcon = (
    <LoadingOutlined
      style={{
        fontSize: '48px',
      }}
    />
  );

  if (loading) {
    return (
      <div id="global-custome-loading" style={{ left, display: 'flex', fontSize: '18px', justifyContent: 'center', alignItems: 'center' }}>
        <Spin size='large' tip="loading" indicator={antIcon} spinning={loading}>
        </Spin>
      </div>
    )
  } else {
    return null;
  }
}
